import React, {useRef} from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect} from 'umi'
import { getPersonSecurityList} from '../service'
import moment from 'moment'
import { DatePicker} from 'antd'
const TableList = () => {
  const actionRef = useRef()
  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 50,
      align: 'center',
      dataIndex: 'promotionId',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '姓名',
      fixed: 'left',
      width: 70,
      align: 'center',
      dataIndex: 'name',
    },
    {
      title: '参保地',
      fixed: 'left',
      width: 100,
      align: 'center',
      dataIndex: 'cityName',
    },
    {
      title: '参保单位',
      align: 'center',
      width: 150,
      fixed: 'left',
      dataIndex: 'unitName',
    },
    {
      title: '养老保险',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'endowmentInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          width: 80,
          dataIndex: 'endowmentInsurancePerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          width: 80,
          dataIndex: 'endowmentInsuranceOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '工伤保险',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'injuryInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          dataIndex: 'injuryInsurancePerson',
          hideInSearch: true,
          width: 80,
        },
        {
          title: '公司缴纳',
          dataIndex: 'injuryInsuranceOrg',
          hideInSearch: true,
          width: 80,
        }
      ]
    },
    {
      title: '重大医疗',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'largerMedicalBas',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          dataIndex: 'largerMedicalPerson',
          hideInSearch: true,
          width: 80,
        },
        {
          title: '公司缴纳',
          dataIndex: 'largerMedicalOrg',
          hideInSearch: true,
          width: 80,
        }
      ]
    },
    {
      title: '医疗保险',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'medicalInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          width: 80,
          dataIndex: 'medicalInsurancePerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          width: 80,
          dataIndex: 'medicalInsuranceOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '失业保险',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'unemploymentInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          width: 80,
          dataIndex: 'unemploymentInsurancePerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          width: 80,
          dataIndex: 'unemploymentInsuranceOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '残疾保障金',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'disabledEmploymentBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          width: 80,
          dataIndex: 'disabledEmploymentPerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          width: 80,
          dataIndex: 'disabledEmploymentOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '生育保险',
      // width: 240,
      children: [
        {
          title: '基数',
          dataIndex: 'maternityInsuranceBase',
          hideInSearch: true,
        },
        {
          title: '个人缴纳',
          width: 80,
          dataIndex: 'maternityInsurancePerson',
          hideInSearch: true,
        },
        {
          title: '公司缴纳',
          width: 80,
          dataIndex: 'maternityInsuranceOrg',
          hideInSearch: true,
        }
      ]
    },
    {
      title: '缴费时间',
      fixed: 'right',
      align: 'center',
      width: 80,
      dataIndex: 'operateTime',
      renderFormItem: (item, props) => {
        return <DatePicker {...props} picker="month" />;
      },
      render: (text) => {
        return text!=='-'?moment(text).format('YYYY-MM'):''
      }
    },
    {
      title: '合计',
      fixed: 'right',
      width: 140,
      children: [
        {
          title: '个人',
          align: 'center',
          fixed: 'right',
          dataIndex: 'personCostTotal',
          hideInSearch: true,
          width: 70
        },
        {
          title: '公司',
          align: 'center',
          fixed: 'right',
          dataIndex: 'orgCostTotal',
          hideInSearch: true,
          width: 70
        },
      ]
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        bordered
        search={false}
        scroll={{x:'2200px'}}
        actionRef={actionRef}
        rowKey="recordId"
        request={(params) => getPersonSecurityList(params)}
        columns={columns}
      />
    </PageHeaderWrapper>
  )
}

export default connect(({}) => ({
}))(TableList)
